<template>
    <div class="classify">
      <div class="car">
        <div class="form">
  
          <div @click="imgupload" class="upload">
            <div class="icon"><i class="el-icon-picture-outline"></i></div>
            <div class="text" v-if="!img">
              
              <div class="up_text">上传图片</div>
              <div class="warning_text">
              只能上传一张
              </div>
              </div>
            
            <img :src="img" class="img">
             <input @change="imgChange" type="file" class="imageInput" accept="image/*">
          </div>
          <div class="form_item">
            <div class="label ">选材分类：</div>
            <div class="value classify_item">
              {{ classfication }}
              <div class="con">
                <ul>
                  <li v-for="item,i in list" :key="i" @click="kindChoose(item)" >{{ item.name }}</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="form_item">
            <div class="label">物品名称：</div>
            <div class="value">
              <input type="text" v-model='objectname'>
            </div>
          </div>
          <div class="form_item">
            <div class="label">购买时间：</div>
            <div class="value">
              <input type="text" v-model='maturity_time'>
            </div>
          </div>
    
     
          <div class="form_item">
            <div class="label">存放地：</div>
            <div class="value">
              <input type="text" v-model='place'>
            </div>
          </div>
          <div class="form_item">
            <div class="label">数量：</div>
            <div class="value">
              <input type="text" v-model="count">
            </div>
          </div>
          <div class="form_item">
            <div class="label" >价格：</div>
            <div class="value">
              <input type="text" v-model='price'>
            </div>
          </div>
          <div class="form_item">
            <div class="label">备注：</div>
            <div class="value">
              <input type="text" v-model='remarks'>
            </div>
          </div>
          <div class="button">
            <div class="submit" @click="objectUp">
                提交
            </div>
            <div class="submit" @click="objectConcel">
                取消
            </div>
          </div>
        </div>
      </div>
    </div>
</template>
  
  <script>
  
  
  export default {
    name: "classifyView",
    props:{
        object_id:{
            type:Number,
            default:null,
        }
    },
    data(){
      return{
        img:"",//图片地址
        imgFile:'',//图片给后端的图片文件
        classfication:'',
        count:null,
        place:'',
        price:'',
        remarks:'',
        maturity_time:'',
        objectname:'',
        list: [
          { name: '食物', },
  
          { name: '衣服', },
          { name: '图书', },
          { name: '日用品', },
          { name: '化妆品', },
          { name: '其他', },
        ]
  
      }
    },
    methods:{
      imgupload(){
        document.querySelector(".imageInput").click()
      },
      imgChange(e){
         console.log(e.target.files[0])
         this.imgFile=e.target.files[0]
         const reader = new FileReader()
         localStorage.setItem("imgFile",this.imgFile)
          reader.readAsDataURL(e.target.files[0])
          reader.addEventListener('load', () => {
            this.img = reader.result
          })
      },
     
      kindChoose(e) {
        this.classfication = e.name;
      },
  
      async objectUp(){
        if( 
          localStorage.imgFile==''||
          this.classfication==''||
          this.count==null||
          this.place==''||
          this.price==''||
          this.remarks==''||
          this.maturity_time==''||
          this.objectname==''){
            console.log("img",localStorage.imgFile)
            this.$message.warning('未填写完整')
          }else{
            let formdata=new FormData()
            // formdata.append( 'img',localStorage.imgFile)
            formdata.append(  'classfication',this.classfication)
            formdata.append( 'count',Number(this.count))
            formdata.append( 'place',this.place)
            formdata.append(  'price',this.price)
            formdata.append('remarks',this.remarks)
            formdata.append( 'maturity_time',this.maturity_time)
            formdata.append(  'objectname',this.objectname)
            formdata.append(  'object_id',Number(this.object_id))
            const resp=await this.$http.post("/object/update",formdata)
            if(resp.data.state==true)
            {
              this.$message.success('添加成功')
              this.$emit("objectConcel")
              this.img="",//图片地址
              this.imgFile='',//图片给后端的图片文件
              this.classfication='',
              this.count=null,
              this.place='',
              this.price='',
              this.remarks='',
              this.maturity_time='',
              this.objectname=''
            }else{
              this.$message.error(resp.data.message)
            }
            console.log("resp",resp)
          }
  
               
  
      },
      async getObject(){
        let data={
            user_id:localStorage.user_id,
            // object_id:this.object_id
            object_id: this.object_id
        }
        console.log("data",data)

        const resp=await this.$http.post("/object/select",data)
        console.log("resp111",resp)
        this.img=require("../../src/static/object/"+resp.data.img),//图片地址
        this.count=resp.data.count,
        this.place=resp.data.place,
        this.price=resp.data.price,
        this.remarks=resp.data.remarks,
        this.maturity_time=resp.data.maturity_time,
        this.objectname=resp.data.objectname
        this.classfication=resp.data.classfication
   
        
      },
      objectConcel(){
        this.$emit("objectConcel")
        
      }
    },
    created(){
      this.getObject()
    }
  }
  </script>
  
  <style lang="less" scoped>
  .classify {
    .button{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
    .submit{
      display:flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
      margin-top: 40px;
      width:30%;
      height: 60px;
      background: #FFFFFF;
      border-radius: 16px;
      font-weight: 400;
      font-size: 32px;
      color: #000000;
      // overflow: hidden;
      padding: 0 20px;
    }
    .submit:hover{
      background-color: #d3d1d1;
    }
    .car {
      // background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), #D9D9D9;
      // opacity: 0.6;
      margin: 0 auto;
      margin-top: 40px;
      width: 600px;
      background-color: rgba(82, 79, 79, 0.7);
      border-radius: 16px;
      padding: 0 100px;
      .form {
        padding: 40px 0;
        .form_item {
          // margin: 40px 0;
          font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
          margin-top: 40px;
          height: 60px;
          background: #FFFFFF;
          border-radius: 16px;
          font-weight: 400;
          font-size: 32px;
          color: #000000;
          display: flex;
          align-items: center;
          // overflow: hidden;
          padding: 0 20px;
      
          .label {
            width: 160px;
          }
          .value {
            flex: 1;
            height: 100%;
            text-align: center;
            input {
              width: 100%;
              height: 100%;
              border: none;
              padding: 0;
              margin: 0;
              font-size: 32px;
            }
          }
          .classify_item {
            position: relative;
            line-height: 60px;
            .con {
              display: none;
              position: absolute;
              background: #fff;
              top: 60px;
              left: 0;
              width: 100%;
            
              ul {
                padding: 0;
                margin: 0;
                li {
                  list-style: none;
                  height: 60px;
                }
                li:hover{
                  background-color: #dbd8d8;
                }
              }
            }
          }
          .classify_item:hover .con{
            display: block;
          }
        }
        .upload {
          border-radius: 16px;
          background: #000;
          display: flex;
          align-items: center;
          color: #fff;
          font-weight: 400;
          font-size: 48px;
          padding: 10px 20px;
          cursor: pointer;
          .icon {
            font-size: 150px;
            padding-right:20px;
          }
          .text{
            flex: 1;
            text-align: center;
  
            .text {
           
            }
            .warning_text{
              font-size: 10px;
            }
          }
          .imageInput{
            display:none;
            background-color: #fff;
          }
          .img{
            // width:200px;
            height:150px;
            border-radius: 8px;
          }
        }
      }
    }
  }
  </style>
  